import React,{useState,useEffect,useContext} from 'react'
import { Switch, Input, Button } from 'antd';
import './configs.css'
import axios from 'axios';
import {CountContext,UPDATE,UPDATE_CODE} from '../Context/count'

export default function Configs () {
  
  const {dispatch} =useContext(CountContext)

  // 倒计时秒数
  const [inputValue, setinputValue] = useState()
  // 倒计时自动显示答案
  const [checked, setChecked] = useState(false)

  //倒计时设置
  const changeIpt = (e)=>{
    // console.log(e.target.value);
    setinputValue(e.target.value)
    
  }
  // 开关
  const onChange = (e) => {
    console.log(e);
    setChecked(e)
    
  }
  // 保存
  const submit = () => {
    
    dispatch({type:UPDATE,count:inputValue})
    dispatch({ type: UPDATE_CODE, isAlert: checked})
    let params = {
      inter: inputValue,
      show: checked,
    }
    console.log(params, 111);
    axios.post('/text/sett/data', params).then((res) => {})
    getData()
    
  }
  
  const getData = () => {
    axios.post('/text/gett/data').then(res => {
      console.log(res);
      const { data } = res.data
      console.log(data[0], '获取的数据');
      setinputValue(data[0].inter)
      setChecked(data[0].show)
    })
  }

  useEffect(() => {
    getData()
  }, [])

  return (
      <div className='hometitle'>
      <div className='title1'>全局配置</div>
      <br/>
      <br/>
      倒计时设置(秒): <Input style={{ width: 100 }} value={inputValue} onChange={changeIpt}/>
      <br/>
      <br/>
      倒计时自动提示答案：
      <Switch checkedChildren="开" unCheckedChildren="关" checked={checked} onChange={onChange}/>
      <br/>
      <br />
      <br />
      <br />
      <Button type='primary' onClick={submit} >保存</Button>
    </div>
  )
}
